import React, { lazy } from "react";

// useRoutes的作用就是将routes数组，转成标签
import { Link, Routes, Route } from "react-router-dom";
import LazyLoad from "./LazyLoad";

// import Home from "./home/Index";
// import About from "./about/Index";

const Home = lazy(() => import("./home/Index"));
const About = lazy(() => import("./about/Index"));

const App = () => {
  return (
    <>
      <h2>app项目</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      {/* <Suspense fallback={<div>loading...</div>}> */}
      <Routes>
        <Route
          path="/home"
          element={
            // <Suspense fallback={<div>loading...</div>}>
            //   <Home />
            // </Suspense>
            <LazyLoad component={<Home />}></LazyLoad>
          }
        ></Route>
        <Route
          path="/about"
          element={
            // <Suspense fallback={<div>loading...</div>}>
            //   <About />
            // </Suspense>
            <LazyLoad component={<About />}></LazyLoad>
          }
        ></Route>
      </Routes>
      {/* </Suspense> */}
    </>
  );
};

export default App;
